<template>
    <Modal title="复制商品" @on-visible-change="showModal" v-model="show" :closable="false" :mask-closable="false">
        <el-form ref="back" label-position="right" label-width="80px">
            <el-select size="small" v-model="warehouseIds" multiple placeholder="请选择">
                <el-option v-for="item in warehouses" :key="item.warehouseId" :label="item.warehouseName"
                    :value="item.warehouseId">
                </el-option>
            </el-select>
            <el-input size="small" v-model="userId" placeholder="对方ID"
                style="width: 160px;margin-right: 10px;margin-left: 10px" />复制给自己的话就不需要填写
        </el-form>
        <div style="height:300px;overflow: scroll;">
            <el-table :data="copyData" style="width: 100%;" v-loading="loading">
                <el-table-column prop="id" label="ID">
                </el-table-column>
                <el-table-column prop="skuCode" label="本地SKU">
                </el-table-column>
                <el-table-column prop="variationName" label="SKU名">
                </el-table-column>
                <el-table-column min-width="120" label="操作" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="danger" icon="el-icon-delete" circle @click="delSku(scope.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 5px;">
            <el-form ref="searchForm" :model="search" label-width="100px" :inline="true"
                @keydown.enter.native.prevent="getProductList">
                <el-form-item label="本地SKU" prop="skuCode">
                    <el-input v-model="search.skuCode" class="w14"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary" @click="getProductList" />
                </el-form-item>
            </el-form>
            <div style="height:300px;overflow: scroll;">
                <el-table :data="productData" style="width: 100%;" v-loading="loading">
                    <el-table-column prop="id" label="ID">
                    </el-table-column>
                    <el-table-column prop="skuCode" label="本地SKU">
                    </el-table-column>
                    <el-table-column prop="variationName" label="SKU名">
                    </el-table-column>
                    <el-table-column min-width="120" label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-upload2" circle @click="addSku(scope.row)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div slot="footer">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button @click="ok" type="success" size="small" :loading="loading">确认复制</el-button>
        </div>
    </Modal>
</template>
<script>
export default {
    name: "CXiapiCost",
    data() {
        return {
            loading: false,
            loadingWarehouse: false,
            warehouses: [],
            warehouseIds: 0,
            userId: null,
            ids: [],
            copyData: [],
            productData: [],
            show: false,
            search: { skuCode: '', userName: '', page: 1, pageSize: 255 },
        }
    },
    props: [

    ],
    methods: {
        showModal: function (val) {
            if (val) {
                this.getWarehouses();
            } else {
                this.warehouseIds = [];
                this.warehouses = [];
            }
        },
        getProductList() {
            var me = this;
            me.loading = true;
            if (!me.search.skuCode) {
                me.$message("请输入sku搜索")
                return;
            }
            me.$http.post("/storageproduct/getList.do", me.search).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.productData = body.obj.list;
                    me.productData = me.productData.filter(itemB => !me.copyData.some(itemA => itemA.id === itemB.id));
                }
                me.loading = false;
            }, () => {
                me.loading = false;
            });
        },
        addSku(row) {
            var me = this;
            me.productData = me.productData.filter(item => item.id !== row.id);
            this.copyData.push(row);
        },
        delSku(index) {
            this.copyData.splice(index, 1);
        },
        showDialog: function () {
            // this.ids = ids;
            this.show = true;
        },
        submit: function () {
            var me = this;
            if (this.warehouseIds.length <= 0) {
                this.errorMessage("请先选择仓库");
                return false;
            }
            me.loading = true;
            const productIds = me.copyData.map(product => product.id);
            me.ids = productIds.join(",")
            me.$http.post("/storageproduct/doCopy.do", { warehouseIds: me.warehouseIds.join(","), ids: me.ids, userId: me.userId }).then(response => {
                me.loading = false;

                var body = response;
                if (body.status == 0) {
                    me.$emit('ok');
                    me.show = false;
                } else {
                    me.errorMessage(body.info);
                }

            }, () => {
                me.loading = false;
            });
        },
        getWarehouses: function () {
            var me = this;
            me.loadingWarehouse = true;

            me.$http.post("/merchant/getWarehouses.do", {}).then(response => {
                me.loadingWarehouse = false;
                var body = response;
                if (body.status == 0) {

                    me.warehouses = body.obj;

                } else {
                    me.errorMessage(body.info);
                }

            }, () => {
                me.loadingWarehouse = false;
            });
        },
        ok: function () {
            this.submit();
        },
        cancel: function () {
            this.show = false;
            this.$emit('cancel')
        }

    }
}
</script>
<style scoped>
.ivu-alert-with-desc {
    padding: 0px 16px;
}

.time {
    font-size: 14px;
    font-weight: bold;
}

.content {
    padding-left: 5px;
    word-wrap: break-word;
}
</style>